<template>
  <div class="container">
    <slider-nav :menuWidth="60" :currentTab.sync="currentTab" :navList="navList"></slider-nav>

    <swiper :current="currentTab" :style="{'height': contentHeight}" class="swiper-box" duration="300" @change="swiperChange">
      <swiper-item v-for="(item, index) in navList" :key="index">
        <content-v v-if="index === currentTab" :currentTab="item"></content-v>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
  import wxp from 'minapp-api-promise'
  import {navList} from '../../common/js/base'
  import SliderNav from '../../components/slider-nav'
  import ContentV from '../../components/content'

  export default {
    data() {
      return {
        currentTab: 0,
        navList: navList,
        winWidth: 0,
        winHeight: 0
      }
    },

    components: {
      SliderNav,
      ContentV
    },

    methods: {
      swiperChange(e) {
        let {current} = e.target
        this.currentTab = current
      },
      bindViewTap() {
        const url = '../logs/main'
        wx.navigateTo({url})
      },
      getUserInfo() {
        // 调用登录接口
        wx.login({
          success: () => {
            wx.getUserInfo({
              success: (res) => {
                this.userInfo = res.userInfo
              }
            })
          }
        })
      },
      clickHandle(msg, ev) {
        console.log('clickHandle:', msg, ev)
      }
    },
    computed: {
      contentHeight() {
        return this.winHeight - 62 + 'px'
      }
    },
    created() {
      // 调用应用实例的方法获取全局数据
      this.getUserInfo()
    },
    async onLoad() {
      let info = await wxp.getSystemInfo()
      this.winHeight = info.windowHeight
      this.winWidth = info.windowWidth
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    height: 100%;
    .swiper-box{
      display: block;
      width: 100%;
      overflow: hidden;
      .swiper-item{
        height: 100%;
        text-align: center;
      }
    }
  }
</style>
